<template>
  <div class="userView" v-if="userInfo">
    <header
      ref="header"
      :style="{
        backgroundImage: `url(${
          userInfo.app_background
            ? userInfo.app_background
            : 'https://photo.tuchong.com/3591669/f/588551840.jpg'
        })`,
      }"
    >
      <div class="headerBox">
        <div
          class="top"
          :style="{
            backgroundColor: `rgba(255, 255, 255, ${scale})`,
            color: `rgba(0, 0, 0, ${scale})`,
          }"
        >
          <div class="back" @click="back">
            <van-icon
              name="arrow-left"
              size="22"
              :color="`rgb(${(1 - scale) * 255}, ${(1 - scale) * 255}, 
            ${(1 - scale) * 255})`"
            />
          </div>
          <div
            class="title"
            :color="`rgba(${scale * 255}, ${scale * 255}, 
            ${scale * 255}), ${scale}`"
          >
            {{ userInfo.username }}
          </div>
          <div class="share" @click="share">
            <van-icon
              name="ellipsis"
              size="22"
              :color="`rgb(${(1 - scale) * 255}, ${(1 - scale) * 255}, 
            ${(1 - scale) * 255})`"
            />
          </div>
        </div>
        <div class="liketop"></div>
        <div class="avatar">
          <van-image
            round
            width="60px"
            height="60px"
            lazy-load
            :src="userInfo.avatar"
          />
        </div>
        <div class="username">{{ userInfo.username }}</div>
        <div class="sub">
          {{ userInfo.occupation }}&nbsp;·&nbsp;{{ userInfo.ip_location }}
        </div>
        <div class="description">{{ userInfo.verify_description }}</div>
        <div class="buttom">
          <div class="count_text" @click.stop="popularity">
            <div class="num">
              {{ userInfo.count.count_popularity | formatter }}
            </div>
            <div class="text">人气</div>
          </div>
          <div class="count_text" @click.stop="toUserFan">
            <div class="num">
              {{ userInfo.count.count_follower | formatter }}
            </div>
            <div class="text">粉丝</div>
          </div>
          <div class="count_text" @click.stop="toUserFollow">
            <div class="num">
              {{
                this.$route.query.userid == 13525021
                  ? follows.length
                  : userInfo.count.count_followee | formatter
              }}
            </div>
            <div class="text">关注</div>
          </div>
          <div class="right" v-if="this.$route.query.userid != 13525021">
            <div class="contactCooperate">联系合作</div>
            <!-- <div class="follow">关注</div> -->
            <div v-if="!isFollow" class="follow" @click.stop="follow">关注</div>
            <div v-else class="unfollow" @click="unfollow">已关注</div>
          </div>
          <div v-else class="right">
            <div class="cover">封面</div>
            <div class="edit">编辑资料</div>
          </div>
        </div>
      </div>
    </header>
    <div class="fixedNav" ref="nav" v-if="overHeader">
      <router-link
        :to="{
          path: '/user/userArticles',
          query: { userid: this.$route.query.userid },
        }"
        replace
      >
        作品
      </router-link>
      <router-link
        :to="{
          path: '/user/userFavorites',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >收藏夹
      </router-link>
      <router-link
        :to="{
          path: '/user/userCollections',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >专辑
      </router-link>
      <router-link
        :to="{
          path: '/user/userLike',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >喜欢
      </router-link>
      <router-link
        :to="{
          path: '/user/userDetail',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >资料
      </router-link>
    </div>
    <nav ref="nav">
      <router-link
        :to="{
          path: '/user/userArticles',
          query: { userid: this.$route.query.userid },
        }"
        replace
      >
        作品
      </router-link>
      <router-link
        :to="{
          path: '/user/userFavorites',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >收藏夹
      </router-link>
      <router-link
        :to="{
          path: '/user/userCollections',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >专辑
      </router-link>
      <router-link
        :to="{
          path: '/user/userLike',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >喜欢
      </router-link>
      <router-link
        :to="{
          path: '/user/userDetail',
          query: { userid: this.$route.query.userid },
        }"
        replace
        >资料
      </router-link>
    </nav>
    <div class="likenav"></div>
    <router-view :overHeader="overHeader" :userInfo="userInfo"></router-view>
  </div>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  name: "UserView",
  data() {
    return {
      userInfo: null,
      scale: 0,
      overHeader: false,
      isFollow: false,
      follows: [],
    };
  },
  created() {
    if (this.$route.query.userid == 13525021) {
      this.userInfo = JSON.parse(localStorage.getItem("nsMine"));
      this.follows = JSON.parse(localStorage.getItem("follows") || "[]");
    } else {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      let url;
      if (this.$route.query.userid == 11577288) {
        url = `/${this.$route.query.userid}user.json`;
      } else {
        url = `https://apis.netstart.cn/xpc/user/${this.$route.query.userid}`;
      }
      this.$axios
        .get(url)
        .then((res) => {
          // console.log(res.data.data);
          this.userInfo = res.data.data;
          // console.log(this.userInfo.id);

          if (localStorage.getItem("nsMine")) {
            let follows = JSON.parse(localStorage.getItem("follows") || "[]");
            if (follows.indexOf(this.userInfo.id) != -1) {
              this.isFollow = true;
            } else {
              this.isFollow = false;
            }
          }
          this.$toast.clear();
        })
        .catch((err) => {
          this.$toast.fail(err);
        });
    }
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    ...mapMutations(["changeShare"]),
    share() {
      // console.log("share");
      this.changeShare();
    },
    handleScroll() {
      if (window.scrollY <= 325) {
        // console.log((window.scrollY / this.$refs.nav.offsetTop).toFixed(2));
        if ((window.scrollY / 325).toFixed(2) > 0.95) {
          this.scale = 1;
        } else {
          this.scale = (window.scrollY / 325).toFixed(2);
        }
        this.overHeader = false;
      } else {
        this.scale = 1;
        this.overHeader = true;
      }
    },
    popularity() {
      console.log("popularity");
    },
    toUserFollow() {
      // console.log("toUserFollow");
      if (this.$route.query.userid == 13525021) {
        this.$router.push({
          path: "/mineFollow",
        });
      } else {
        this.$router.push({
          path: "/userFollow",
          query: { userid: this.userInfo.id },
        });
      }
    },
    toUserFan() {
      // console.log("toUserFan");
      this.$router.push({
        path: "/userFan",
        query: { userid: this.userInfo.id },
      });
    },
    follow() {
      if (!localStorage.getItem("nsMine")) {
        this.$router.replace({ path: "/login" });
      } else {
        // console.log(id);
        let follows = JSON.parse(localStorage.getItem("follows") || "[]");
        follows.unshift(this.userInfo.id);
        localStorage.setItem("follows", JSON.stringify(follows));
        this.isFollow = true;
        this.$toast("关注成功");
      }
    },
    unfollow() {
      this.$dialog
        .confirm({
          message: "确定要取消关注TA吗？",
        })
        .then(() => {
          // on confirm
          // console.log(id);
          let follows = JSON.parse(
            localStorage.getItem("follows") || "[]"
          ).filter((o) => o != this.userInfo.id);
          localStorage.setItem("follows", JSON.stringify(follows));
          this.isFollow = false;
          this.$toast("取消关注成功");
        })
        .catch(() => {
          // on cancel
        });
    },
  },
  filters: {
    formatter: function (value) {
      if (value >= 1000 && value < 10000) {
        value = (value / 1000).toFixed(1) + "k";
      }
      if (value >= 10000 && value < 10000000) {
        value = (value / 10000).toFixed(1) + "w";
      }
      return value;
    },
  },
  mounted() {
    // console.log("mounted");
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  beforeDestroy() {
    // console.log("beforeDestroy");
    window.removeEventListener("scroll", this.handleScroll);
  },
};
</script>

<style lang="scss" scoped>
.userView {
  header {
    height: 375px;
    background-color: #999;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;

    .headerBox {
      // width: 100%;
      padding: 0 15px;
      height: 375px;
      background-color: rgba(0, 0, 0, 0.2);

      .top {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 10;

        .back {
          margin-left: 10px;
        }

        .title {
          font-size: 20px;
          font-weight: bold;
        }

        .share {
          margin-right: 10px;
        }
      }

      .liketop {
        height: 50px;
      }

      .avatar {
        margin-top: 20px;
        margin-bottom: 20px;
        width: 62px;
        height: 62px;
        border-radius: 50%;
        box-sizing: border-box;
        border: 2px solid white;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .username {
        font-size: 20px;
        font-weight: bold;
        color: white;
        margin-bottom: 15px;
      }

      .sub {
        font-size: 14px;
        color: white;
        margin-bottom: 10px;
      }

      .description {
        font-size: 13px;
        color: white;
        margin-bottom: 62px;
      }

      .buttom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;

        .count_text {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: white;

          .num {
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 3px;
          }

          .text {
            font-size: 13px;
          }
        }

        .right {
          display: flex;
          align-items: center;

          .contactCooperate {
            width: 78px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            font-size: 13px;
            background-color: white;
            color: black;
            margin-right: 15px;
          }

          .unfollow {
            width: 68px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            font-size: 14px;
            background-color: #999;
            color: #f7f7f7;
          }

          .follow {
            width: 68px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            font-size: 14px;
            background-color: red;
            color: white;
          }

          .cover {
            margin-right: 15px;
            width: 58px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            font-size: 14px;
            background-color: rgba(255, 255, 255, 0.8);
            color: black;
          }

          .edit {
            width: 78px;
            text-align: center;
            height: 30px;
            line-height: 30px;
            border-radius: 15px;
            font-size: 13px;
            background-color: red;
            color: white;
          }
        }
      }
    }
  }

  nav {
    // position: fixed;
    // top: 375px;
    // left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    border-bottom: 1px solid #f2f2f2;
    box-sizing: border-box;

    a:first-of-type {
      margin-left: 15px;
    }

    a:last-of-type {
      margin-right: 15px;
    }

    a {
      // width: 20%;
      color: black;
      text-align: center;
    }

    .router-link-active {
      color: red;
    }
  }

  .fixedNav {
    position: fixed;
    top: 50px;
    left: 0;
    background-color: white;
    z-index: 10;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    border-bottom: 1px solid #999;
    box-sizing: border-box;

    a:first-of-type {
      margin-left: 15px;
    }

    a:last-of-type {
      margin-right: 15px;
    }

    a {
      // width: 20%;
      color: black;
      text-align: center;
    }

    .router-link-active {
      color: red;
    }
  }

  // .likenav {
  //   height: 50px;
  // }
}
</style>
